<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <avue-chat ref="chat"
             @keysend="handleSubmitChat"
             @keyadd="handleAddChat "
             :config="configChat "
             @submit="handleSubmitChat"
             v-model="msgChat"
             :list="listChat">

  </avue-chat>
</template>

<script>
import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style
import {timestampToTime,timeToString} from "@/framework-core/utils/util";
import request from '@/framework-core/axios';
import website from '@/framework-core/config/website';
import store from '@/framework-core/store/';

const myconfig =  {
  img: '/img/user.jpg',
  your: '/img/userPic.png',
  name: 'aseyun 数字助手2',
  dept: '数字教育'
}

export default {
  name: "MyChat",
  props: {
    pre: {
      type: String,
      default: () => {
        return ""
      },
    },
    tag: {
      type: String,
      default: () => {
        return "chat"
      },
    },
    //EVERYONE;USER;GROUOP
    scope: {
      type: String,
      default: () => {
        return "GROUOP"
      },
    },
    target: {
      type: String,
      default: () => {
        return ""
      },
    },
  },
  data () {
    return {
      configChat:myconfig,
      msgChat:"",
      lastAiMsg:"",
      myEventSource:{},
      listChat: [
        {
          "date":  timeToString(new Date(),"yyyy-MM-dd hh:mm:ss"),
          "text": {
            "text": '我是数字助手aseyun，很高兴为您服务'
          },
          "mine": false,
          "img": myconfig.img,
          "name": myconfig.name
        }
      ],

    };
  },
  created () {
    NProgress.configure({ showSpinner: false });
  },
  mounted () {
    this.myEventSource = new EventSource( website.baseUrl+'/api/chat/online?group='+(this.pre+this.target)+'&jrtoken='+store.getters.token);
    let self = this;//因EventSource中this的指向变了，所以要提前存储一下
    this.myEventSource.onopen = function() {
      console.log('项目链接Eventsource成功');
    };
    this.myEventSource.onmessage = function(event) {
      console.log('返回数据:' + event.data);
      var vdata = JSON.parse(event.data);
      if(self) {
        self.lastAiMsg = {
          "mine": false,
          "date": timeToString(new Date(), "yyyy-MM-dd hh:mm:ss"),
          "img": myconfig.img,
          "name": vdata.msgType =="CHAT"?vdata.sourceName:self.configChat.name,
          "text": {"text": self.fixMarkdown(vdata.content)}
        };
        self.listChat.push( self.lastAiMsg);
       // self.$refs.chat.pushMsg(self.lastAiMsg);
      }
    };
    this.myEventSource.onerror = function (){
      console.log('项目Eventsource链接失败');

    };
  },
  watch: {

  },
  computed: {

  },
  methods: {
    fixMarkdown(message) {
      message = message.replaceAll('<br>', '\n');
      message = message.replaceAll('&nbsp;', ' ');
      message = message.replaceAll('&lt;','<');
      message = message.replaceAll('&gt;','>');
      return message;
    },
    handleAddChat (msg) {
      this.keylistChat.push(msg);
      this.$message.success('快捷回复语添加成功')
    },
    handleSubmitChat (msg) {
      this.msgChat = msg || this.msgChat
      this.lastAiMsg = {
        "mine": true,
        date: timeToString(new Date(), "yyyy-MM-dd hh:mm:ss"),
        "img": this.configChat.your,
        "name": "用户",
        "text": {"text": this.fixMarkdown(this.msgChat)}
      }
      this.$refs.chat.pushMsg(this.lastAiMsg);
      var tempsmg =  this.msgChat;

      this.publish(tempsmg);
      this.msgChat = '';
    },

    //智能题库
    publish (msg) {
      let data = {
        "tag": this.tag || "chat",
        "content": msg,
        "target": this.pre+this.target,
        "title": "",
        "scope": this.scope || "GROUOP"
      };
      request({
        url: website.baseUrl + '/api/chat/publish',
        method: 'post',
        data: data
      }).then(response => {
        //this.$message.success('保存成功')
      }).catch(error => {
        this.$message.error(error.msg || error.message)
      })
    },
  }
};
</script>

<style lang="scss">
.web__content>div{
  width: 100% !important;
}
.web__content .web__footer {
  width: 100% !important;
}
</style>
